<style lang="less">
.img-simple {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  input {
    width: 100%;
    height: 100%;
    opacity: 0;
  }
  z-index: 2;
}
.result-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  .box {
    position: relative;
    height: 4.5rem;
    overflow: hidden;
    p {
      width: 100%;
      height: 100%;
    }
    img {
      width: 100%;
      height: 100%;
      /*position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      transform:translate(-50%,-50%);*/
    }
  }
}
</style>
<template>
<div class="form-wrap2 mb30">
  <p class="txt">{{word}}</p>
  <div class="camera-wrap" v-if="edit"  @click="getImage()">
    <!-- <i class="iconfont icon-add"></i> -->
    <div class="footer"><i class="iconfont icon-camera"></i>上传{{word}}</div>
    <!--
    <div class="img-simple">
      <input type='file' accept="image/gif, image/jpeg, image/jpg, image/png" @change="getPic">
    </div>
    -->
    <div class="result-img">
      <div class="box">
        <p v-for="(item, index) in picJson.imgLista">
        
          <img :src="item | simpleImgUrl" v-if="item.indexOf('File') > -1 || item.indexOf('.') > -1">
          <img :src="item" v-else>
          <!-- <img :src="item | simpleImgUrl" v-if="item.indexOf('File') > -1" class="hidden">
          <img :src="item" v-else class="hidden"> -->
        </p>
      </div>
    </div>
  </div>

  <div class="camera-wrap" v-else>
    <div class="result-img">
        <div class="box">
          <p v-for="(item, index) in picJson.imgLista" @click="getPreImg(item)">
            <img :src="item | simpleImgUrl" v-if="item.indexOf('File') > -1 || item.indexOf('.') > -1">
            <img :src="item" v-else>
            <!-- <img :src="item | simpleImgUrl" v-if="item.indexOf('File') > -1" class="hidden">
            <img :src="item" v-else class="hidden"> -->
          </p>
      </div>
    </div>
  </div>
  <div class="mask" v-if="showPic" @click="showPic=''"></div>
  <div class="pre-pic" v-if="showPic" @click="showPic=''"><img :src="showPic"></div>
</div>
</template>
<script>
export default {
  props: ["word", "list", "max", "editflag"],
  data() {
    return {
      showPic: ""
    };
  },
  computed: {
    picJson() {
      if (this.list) {
        var arr = {};
        arr.imgLista = this.list.imgLista;
        arr.imgListBase = this.list.imgListBase;
        return arr;
      } else {
        return "";
      }
    },
    userinfo() {
      if (localStorage.UserInfo) {
        return JSON.parse(localStorage.UserInfo);
      }
    },
    limit() {
      if (!this.max || this.max > 9) {
        return 9;
      } else {
        return this.max;
      }
    },
    edit() {
      return this.editflag;
    }
  },
  methods: {
    getPreImg(val) {
      var value;
     
      if (val.indexOf("File") > -1) {
        console.log(1);
        this.showPic = "https://image.csyaoly.com" + val;
      } else if (val.indexOf(".") != -1) {
        console.log(2);
        this.showPic = "http://ylpt.csyaoly.com/UploadFiles" + val;
      } else {
        console.log(3);
        this.showPic = val;
      }
    },
    getImage() {
      var self = this;
      // if(self.limit == 1 && self.picJson.imgLista.length > 0)
      // {
      //   self.$vux.toast.show({
      //     type:'text',//success, warn, cancel, text
      //     text: '只能上传一张图片，请删除图片后再上传',
      //   });
      // }
      // else
      // {
      // let currentSize = this.picJson.imgLista.length;
      self.jWeixin.chooseImage({
        count: self.limit, // 默认9
        sizeType: ["compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success: function(res) {
          var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          if (localIds.length > self.limit) {
            self.$vux.toast.show({
              type: "text", //success, warn, cancel, text
              text: "最多上传" + self.limit + "张图片"
            });
            return false;
          }
          self.delImg(0);
          localIds.forEach(li => {
            self.picJson.imgLista.push(li);
          });
          self.getLocalImgDataC(0);
        }
      });
      // }
    },

    getLocalImgDataC(index) {
      var self = this;
      this.jWeixin.getLocalImgData({
        localId: self.picJson.imgLista[index], // 图片的localID
        success: function(res) {
          let localData = res.localData;
          if (window.__wxjs_is_wkwebview) {
            var imgbase64 = localData.substr(
              localData.indexOf("base64") + 7,
              localData.length
            );
            self.picJson.imgLista.splice(index, 1, localData);
            self.picJson.imgListBase.push(imgbase64);
          } else {
            self.picJson.imgListBase.push(localData);
          }
          self.getLocalImgDataC(index + 1);
        }
      });
    },
    //删除图片
    delImg(index) {
      this.picJson.imgLista.splice(index, 1);
      this.picJson.imgListBase.splice(index, 1);
    }
  }
};
</script>